<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form ref="ads" :model="ads" label-width="80px">
                <el-form-item label="广告标题">
                    <el-input v-model="ads.title"></el-input>
                </el-form-item>
                <el-form-item label="封面图">
                    <el-upload :class="advertType!=='stdby'?'avatar-uploader':'avatar-uploader1'" ref="upload" :data="imageFile" :action="getLocation" :show-file-list="false" :on-success="handleAvatarSuccess" v-loading.fullscreen.lock="fullscreenLoading" :before-upload="beforeAvatarUpload">
                        <img v-if="ads.img_url" :src="ip+ads.img_url" :class="advertType!=='stdby'?'avatar-pd':'avatar-mobile'">
                        <i v-else class="el-icon-plus" :class="advertType!=='stdby'? 'avatar-uploader-icon':'avatar-uploader-icon1' "></i>
                    </el-upload>
                    <!-- <span class="tips">建议尺寸：{{advertType=='pd'?'624×140':advertType=='app'?'640*320':'683*384'}}像素</span> -->
                    <span class="tips">建议尺寸:{{advertType !=='stdby'?'624*140':'1280*760'}} 像素</span>
                </el-form-item>
                <el-form-item label="广告内容" prop="content">
                    <quill-editor v-model="ads.content" ref="myEdit"></quill-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="edit">保存</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-upload class="upload-demo" :action="getLocation" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess' ref="upload" style="display:none">
            <el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button>
        </el-upload>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { pic_location, ip } from '../../utils/local.js'
import { addAd, putAd, picture_upload } from '../../api/server.js'
import { mapState } from 'vuex'
import { onSuccess } from '../../utils/quill.js'

export default {
    data() {
        return {
            getLocation: '',
            form: {
            },
            resourceFile: [],
            fullscreenLoading: false,
            imageFile: {},
            uploadData: {},
            ip: ip
        }
    },
    created() {
        this.getLocation = pic_location
        console.log('adverType', this.advertType)
        if (this.ads.id) {
            this.resourceFile = this.ads.resource_file.split(";") || []
        }
    },
    computed: mapState({
        ads: state => state.Ads.ads,
        advertType: state => state.Ads.advert_type
    }),
    methods: {
        back() {
            this.$router.go(-1)
        },
        videoHandler(state) {
            this.addRange = this.$refs.myEdit.quill.getSelection()
            if (state) {
                document.getElementById('imgInput').click()
            }
            this.uploadType = 'video'
        },
        imgHandler(state) {
            this.addRange = this.$refs.myEdit.quill.getSelection()
            if (state) {
                document.getElementById('imgInput').click()
            }
            this.uploadType = 'image'
        },
        handleAvatarSuccess(res) {
            this.ads.img_url = res.result.filePath
            this.fullscreenLoading = false
        },
        beforeAvatarUpload(file) {
            this.imageFile.pictureFile = file
            let at = this.advertType
            // this.imageFile.width = at == 'pd' ? 624 * 3 : at == 'app' ? 640 * 3 : 683 * 3
            // this.imageFile.height = at == 'pd' ? 140 * 3 : at == 'app' ? 320 * 3 : 384 * 3
            this.imageFile.width = at !== 'stdby' ? 640 * 3 : 1280 * 3
            this.imageFile.height = at !== 'stdby' ? 150 * 3 : 760 * 3
            return this.upload(file)
        },
        upload(file) {
            this.fullscreenLoading = true
        },
        upScuccess(e) {
            onSuccess(this, e)
            this.resourceFile.push(e.result.resultMap)
        },
        edit() {
            let body = this.ads
            let title = this.ads.title
            let content = this.ads.content
            let imageFile = this.ads.img_url
            let advertType = this.advertType ? this.advertType : 'pd'
            body.resourceFile = this.resourceFile.join(";")
            body.title = title
            body.content = content || ''
            body.imageFile = imageFile
            body.advertType = advertType
            console.log('advert', this.ads)
            if (this.ads.id) {
                let advert_id = this.ads.advert_id
                // putAd({ title, advert_id, imageFile, content, advertType })
                putAd({ body })
                    .then(res => {
                        if (res.code === '000000') {
                            this.$message.success('修改成功')
                        }
                    })
            } else {
                // addAd({ title, content, imageFile, advertType })
                addAd({ body })
                    .then(res => {
                        if (res.code === '000000') {
                            this.$message.success('添加成功')
                        }
                    })
            }
        },
        beforeUpload(file) {
            this.uploadData.pictureFile = file
            return this.upload(file)
        }
    },
    mounted() {
        this.$refs.myEdit.quill.getModule('toolbar').addHandler('image', this.imgHandler),
            this.$refs.myEdit.quill.getModule('toolbar').addHandler('video', this.videoHandler)
    },
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}
.avatar-uploader {
  width: 640px;
  height: 150px;
  border: 1px;
}
.avatar-uploader1 {
  width: 640px;
  height: 380px;
  border: 1px;
}
.avatar-uploader .el-upload {
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  margin-left: 240px;
  font-size: 28px;
  color: #8c939d;
  width: 640px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar-uploader-icon1 {
  margin-left: 240px;
  font-size: 28px;
  color: #8c939d;
  width: 640px;
  height: 380px;
  line-height: 380px;
  text-align: center;
}
.avatar-pd {
  width: 640px;
  height: 150px;
  display: block;
}
.avatar-mobile {
  width: 640px;
  height: 380px;
  display: block;
}
// .ql-video {
//   disabled: none;
// }
.tips {
  color: gray;
  margin-left: 27%;
}
</style>